<template>
	<view class="item" v-if="item.title">
		<view class="title">{{item.title}}
		</view>
		<view class="pl">
			{{item.pl}}评论&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.category}}
		</view>
		<view class="content">
			{{item.content}}
		</view>
		<view class="imgs">
			<image class="image" v-for="(item2, index2) in item.imgs" :key="index2" :src="item2"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {}
			}
		},
		methods: {
			async loadDetail(id) {
				let token = uni.getStorageSync('token')
				if (token) {
					let ret = await uni.$get('getDetail', {
						id
					}, {
						authorization: token
					})
					this.item = ret
				} else {
					uni.showModal({
						content: '请登录后查看详情',
						success: ({
							confirm
						}) => {
							if (confirm) {
								// 去登录
								uni.setStorageSync('navigateType', 'navigateTo')
								uni.setStorageSync('url', '/pages/detail/detail?id=' + id)
								uni.switchTab({
									url: '/pages/mine/mine'
								})
							} else {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					})
				}
			}
		},
		onLoad({
			id
		}) {
			this.loadDetail(id)
		}
	}
</script>

<style scoped lang="scss">
	.item {
		border-bottom: 2rpx solid #eee;
		padding: 6px;
		
		.title {
			margin: 10rpx 0;
			font-size: 16px;
			font-weight: bold;
		}

		.imgs {
			text-align: center;
			.image {
				width: 95vw;
				height: 60vw;
			}
		}

		.pl {
			margin: 10rpx 0;
			padding-bottom: 6px;
			border-bottom: 1px solid #ccc;
		}
		.content {
			line-height: 24px;
		}
	}
</style>
